import React, { Component, Fragment } from "react";
import cart_empty from "../assets/imgs/cart_empty.png";
import { SwipeAction, Checkbox } from "antd-mobile";
import { connect } from "react-redux";
const CheckboxItem = Checkbox.CheckboxItem;
export class Cart extends Component {
  handlPay = () => {
    console.log('去结算')
    this.props.history.push('/pay')
 }
  //加减操作
   handReduverStateNum = (id,state,unit) => {
    this.props.hangeReduverStateNum(id,state,unit)
  }
  // 勾选
  handlReducerSelectStatus = (id) => {
    this.props.changeReducerSelectStatus(id)
  }
  // 全选
  handAllChecked = (flag) => {
    this.props.changeReducerSelectAllStatus(flag)
  }
  // 删除
  delItem = (id) => {
    console.log(id,'idid')
    this.props.delReducerGoodsItem(id)
  }
  render() {
    return (
      <div className="cart">
        {/* 当没有商品的时候显示 */}
        {this.props.cartList.length == 0 ? (
          <div className="empty-cart">
            <img src={cart_empty} alt="" className="empty-cart-img" />
            <div className="empty-cart-text">
              当前还没有商品-感觉去添加购物车吧
            </div>
            <div className="btn" onClick={() => { this.props.history.go(-1); }} > 返回 </div>
          </div>
        ) : (
          <Fragment>
            <div className="wrap">
              <div className="cart-container">
                {this.props.cartList.map(v => (
                  <SwipeAction key={v.id}
                  style={{ backgroundColor: 'gray' }}
                      autoClose
                      right={[
                        {
                          text: '取消',
                          onPress: () => console.log('cancel'),
                          style: { backgroundColor: '#ddd', color: 'white' },
                        },
                        {
                          text: '删除',
                          onPress: () => {this.delItem(v.id)},
                          style: { backgroundColor: '#F4333C', color: 'white' },
                        },
                      ]}>
                    <CheckboxItem checked={v.selectStatus} onChange={()=>{this.handlReducerSelectStatus(v.id)}}>
                      <div className="item-detail">
                        <img src={v.img} alt="" />
                        <div className="item-info">
                          {/* 商品标题 */}
                          <h3>{v.title}</h3>
                          <div className="pay">
                            <div className="pay-price">{v.price}</div>
                            <div className="edit-quantity">
                              {/* 减 */}
                              <p className="operate-btn iconfont iconminus"  onClick={()=>{this.handReduverStateNum(v.id,'SUbBTRACT',-1)}}> </p>
                              {/* 当前数量 */}
                              <p className="btn-input">{v.num}</p>
                              {/* 加 */}
                              <p className="operate-btn iconfont iconplus" onClick={() => { this.handReduverStateNum(v.id, 'ADD', 1) }}> </p>
                              
                            </div>
                          </div>
                        </div>
                      </div>
                    </CheckboxItem>
                  </SwipeAction>
                ))}
              </div>
            </div>
            <div className="cart-footer">
              <div className="cart-footer-left">
                {/* 全选 checked*/}
                <CheckboxItem checked={this.props.ischeckedAll} onChange={()=>this.handAllChecked(this.props.ischeckedAll)}></CheckboxItem>
              </div>
              <div className="cart-footer-center">
                  <span>总价格:</span>
                  <span className="total-price">{this.props.totalPrice}</span>
              </div>
              <div className="cart-footer-right">
                <span className="goto-pay" onClick={this.handlPay}>去结算</span>
              </div>
            </div>
          </Fragment>
        )}

        <style jsx>{`
          .cart {
            padding-bottom: 50px;
            min-height: 100%;
            font-size: 14px;
            .empty-cart {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-top: 100px;
              height: 100%;
              .empty-cart-img {
                height: 90px;
                width: 90px;
              }
              .empty-cart-text {
                font-size: 20px;
                color: #999;
                padding: 15px 0;
              }
              .btn {
                font-size: 20px;
                padding: 15px 55px;
                text-align: center;
                margin: 0 auto;
                border-radius: 10px;
                background: #ed601b;
                color: #fff;
              }
            }
            .item-detail {
              display: flex;
              img {
                margin: 2px 0 2px 5px;
                width: 90px;
                height: 90px;
              }
              .item-info {
                padding: 5px 10px;
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: space-around;
                white-space: normal;
                h3 {
                  font-size: 16px;
                  font-weight: 400;
                }
                .pay {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 25px;
                  .pay-price {
                    color: #ff5500;
                    font-weight: bold;
                  }
                  .edit-quantity {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .operate-btn {
                      padding: 0 10px;
                      font-size: 20px;
                      color: #bababa;
                    }
                    .btn-minus {
                      font-size: 14px;
                    }
                  }
                }
              }
            }
            .cart-footer {
              position: fixed;
              bottom: 50px;
              display: flex;
              justify-content: space-between;
              height: 50px;
              line-height: 50px;
              width: 100%;
              border-top: 1px solid #e7e7e7;
              background-color: #fff;
              .cart-footer-left {
                display: flex;
                justify-content: cneter;
                align-items: center;
                span {
                  display: block;
                  height: 50px;
                  padding: 0 5px;
                }
              }
              .cart-footer-center {
                .total-price {
                  color: #ff5500;
                  font-weight: bold;
                }
              }
              .cart-footer-right {
                display: flex;
                flex-direction: column;
                padding: 0 20px;
                background-color: #ff5500;
                .goto-pay {
                  color: #fff;
                }
              }
            }
          }
        `}</style>
      </div>
    );
  }
}
const countTotalPrice = (data) => {
  let totalPrice=0
  data.map(v => {
    if (v.selectStatus) {
      totalPrice+= v.price*v.num
    }
  })
  return totalPrice
}
const handIscheckedAll = (data) => {
  let flag=true
  data.map(v => {
    if (v.selectStatus == false) {
      flag=false
   }
  })
  return flag
}
const mapStateToProps = state => {
  return {
    cartList: state.cartModule,
    totalPrice: countTotalPrice(state.cartModule),
    ischeckedAll: handIscheckedAll(state.cartModule),
  };
};
const mapActionToProps = dispatch => {
  return {
    // 加减操作
    hangeReduverStateNum: (id,state,unit) => {
      dispatch({type:state,payload:{id:id,unit:unit}})
    },
    // 修改勾选状态
    changeReducerSelectStatus: (id) => {
      dispatch({type:'SELECTSTATES',payload:{id:id}})
    },
    // 修改全选
    changeReducerSelectAllStatus: (flag) => {
      dispatch({type:'SELECTSAllTATES',playload:{ischeckState:!flag}})
    },
    // 删除一项商品
    delReducerGoodsItem: (id) => {
      dispatch({type:'DELETEITEM',playload:{id:id}})
    },
  };
};

export default connect(mapStateToProps,mapActionToProps)(Cart);
